<template>
  <div>

    <Card>
      <div style="display:flex;align-items: center;justify-content: space-between;">
        <div style="display:flex;">
          <Input
            placeholder="查找"
            style="width:300px;margin-right:10px"
            suffix="ios-search"
            @on-change="changeOrder"
            v-model="commodityOrderId"
            clearable
          ></Input>
          <DatePicker 
            clearable   
            transfer :disabled="false"       
            format="yyyy-MM-dd"
            type="daterange"
            placeholder="选择起止时间" 
            style="width: 300px;" 
             :editable="false" 
            @on-change="changePage"
            v-model="time"           
          ></DatePicker>
        </div>
      </div>
      <Table
        class="table"
        :loading="loading"
        highlight-row
        :columns="columns"
        :data="data"
      ></Table>
      <Page class="page"
      show-total 
        :total="total" 
        :current.sync="current" 
        show-elevator 
        @on-change="changePage" />
    </Card>

    <Modal v-model="modal" title="查看详情"  style="text-align: center; width: 180%;">
      <Form ref="form" :model="newData" :label-width="150" >
          <FormItem label="订单id" ><p style="font-weight:bold" >{{newData.commodityOrderId}}</p></FormItem>
          <FormItem label="订单状态">
            <p style="font-weight:bold">
              {{newData.orderStatus == 'DOING'?'实施中':''}}
              {{newData.orderStatus == 'MERCHANT_CANCELLED'?'商家已取消':''}}
              {{newData.orderStatus == 'TO_CONFIRM'?'实施待确认':''}}
              {{newData.orderStatus == 'DONE'?'已完成':''}}
            </p>
          </FormItem>
          <FormItem label="联系人"><p style="font-weight:bold">{{newData.contactor}}</p></FormItem>
          <FormItem label="商户的userId"><p style="font-weight:bold">{{newData.merchantPid}}</p></FormItem>
          <FormItem label="小程序名称"><p style="font-weight:bold">{{newData.miniAppName}}</p></FormItem>
          <FormItem label="商户名称"><p style="font-weight:bold">{{newData.name}}</p></FormItem>
          <FormItem label="下单时间"><p style="font-weight:bold">{{newData.orderTime}}</p></FormItem>
          <FormItem label="联系电话"><p style="font-weight:bold">{{newData.phone}}</p></FormItem> 
          <FormItem label="订购项的标题"><p style="font-weight:bold">{{newData.title}}</p></FormItem> 
        </Form>
        <!-- <div class="list" style="width:auto" >{{msg}}
            <ul  v-for="(item,index) in columns" :key="index" >
                <li>{{ item.title }}</li>
                <li >{{ item.key }}</li>
            </ul>
        </div> -->
      <div slot="footer">
        <Button type="warning" class="Button" @click="modal = false">关闭</Button>
      </div>
    </Modal>

  </div>
</template>

<script>
  import axios from 'axios'
  export default {
      data() {
        return {
          loading: false,
          columns:[
                { title: "订单id", key: "commodityOrderId", align: "center"},
                { title: "订单状态", key: "orderStatus" , align: "center",render: (h,params) => {
                  switch(params.row.orderStatus){
                    case 'DOING':
                    return  h('span','实施中')
                    case 'MERCHANT_CANCELLED':
                    return  h('span','商家已取消')
                    case 'TO_CONFIRM':
                    return h('span','实施待确认')
                    case 'DONE':
                    return h('span','已完成')
                  }
                }},
                { title: "联系人", key: "contactor", align: "center"},
                { title: "商户的userId", key: "merchantPid", align: "center"},
                { title: "小程序名称", key: "miniAppName", align: "center"},
                { title: "商户名称", key: "name", align: "center"},
                { title: "下单时间", key: "orderTime", align: "center"},
                { title: "联系电话", key: "phone", align: "center"},
                { title: "订购项的标题", key: "title", align: "center"},
            { title: "操作", align: "center",
              render: (h, params) => {
              return h("div", [
                h("Button",{
                  props: {
                    type: "success",
                  },
                  on: {
                    click: () => {
                        this.detail(params);
                    }
                  }
                  },"详情"),
                ])
              }
            }
          ],
          data: [],
          total: 10,
          size: 10,
          current: 1,
          time: [],
          commodityOrderId: '',
          modal: false,
          msg: '',
          newData:{
            formData: {}
          }


        }
      },
      created(){
        this.getIsvMarketOrder()
      },
      methods:{
        changePage(data){
          this.time = data
          this.getIsvMarketOrder()
        },
        
        changeOrder(){
          this.current = 1
          this.getIsvMarketOrder()
        },
        getIsvMarketOrder(){
          this.loading = true
          this.$http("/stage/appletBuild/getIsvMarketOrder", {
            current: this.current,
            commodityOrderId: this.commodityOrderId,
            end: this.time[1]?this.getTime(this.time[1]):'',
            size: this.size,
            start: this.time[0]?this.getTime(this.time[0]):''
          }, "post", res => {
            if (res.data.code == 200) {
              this.data = res.data.data.records
              this.total = res.data.data.total
            }else{
              this.$Message.error(res.data.msg);
            }
            this.loading = false
          })
        },

        // 查看详情
        detailLook(data){
          this.modal2 = true
          this.newData = data.row
        },

        detail(params){
          this.modal = true
          this.msg = params.row
          this.newData = params.row
        },
        

      }
  }
</script>

<style scoped>
    .list{
        
        text-align: center;
    }
    .list>ul{
        list-style: none;
        display: flex;
        justify-content: space-around;
        margin-bottom: 1rem;
        border-bottom: 1px solid #000;
        height: 35px;
    }
    .list>ul>li{
        
    }

</style>